<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        header h2 {
            width: 400px;
            text-align: center;
            padding: 20px 0;
            background-color: brown;
            color: white;
            font-weight: bold;
            margin: 20px auto;
        }

        .selectedName {
            width: 800px;
            height: 100px;
            line-height: 100px;
            border-radius: 10px;
            border: 1px solid #ccc;
            margin: 0 auto;
            padding: 20px 0;
            text-align: center;
            font-size: 100px;
        }

        .btns {
            text-align: center;
            padding: 20px 0;
        }

        .btns input {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background-color: #eee;
            border-radius: 10px;
            margin: 0 20px;
        }

        .winnerList {
            display: flex;
            width: 600px;
            margin: 20px auto;
            justify-content: space-between;
        }

        .winner {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            text-align: center;
            border: 10px solid #ccc;
            background-color: cadetblue;
        }

        .winner p {
            margin: 20px 0;
        }

        .winner h3 {
            font-size: 34px;
            color: white;
        }
    </style>
</head>

<body>
    <header>
        <h2>中奖姓名</h2>
    </header>
    <div class="draw">
        <h1 class="selectedName" id="selectedName"></h1>
        <div class="btns">
            <input type="button" value="开始" id="startBtn">
            <input type="button" value="停止" id="stopBtn">
        </div>
    </div>
    <div class="winnerList">
        <div class="winner">
            <p>一等奖</p>
            <h3>-</h3>
        </div>
        <div class="winner">
            <p>二等奖</p>
            <h3>-</h3>
        </div>
        <div class="winner">
            <p>三等奖</p>
            <h3>-</h3>
        </div>
    </div>

    <script>
        let str = `陈城,戚志东,林鹏,何俊宇,李成科,杨占力,李雷,周翔宇,杨雷,涂域琴,雷景翔,陈阳,董贝乐`;
        let arr = str.split(',');
        let nameList = document.querySelectorAll('.winner h3'); // 3 个 h3

        let timer = null, index = -1, i = 2;

        startBtn.onclick = function () {
            if (timer) {
                return;
            }
            timer = setInterval(function () {
                index = random(arr.length - 1); //随机下标
                selectedName.innerText = arr[index];
            }, 150);
        }

        stopBtn.onclick = function () {
            clearInterval(timer);
            if (i >= 0) {
                nameList[i].innerText = arr[index];
                i--;
            }
        }


        // 随机数
        function random(min, max) {
            if (!max) {
                [max, min] = [min, 0];
            }
            if (min > max) {
                [max, min] = [min, max];
            }
            return parseInt(Math.random() * (max + 1 - min) + min);
        }

    </script>


</body>

</html>